<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
    <div id="app">
        <v-app id="inspire">
            <v-app id="inspire">
                <v-navigation-drawer v-model="drawer" app clipped>
                    <v-list>
                        <v-list-item v-for="i in cato" @click="clickNavBar(i)">
                            <v-list-item-action>
                                <v-icon>mdi-view-dashboard</v-icon>
                            </v-list-item-action>
                            <v-list-item-content>
                                <v-list-item-title>
                                    <h2>{{i}}</h2>
                                </v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </v-list>
                </v-navigation-drawer>

                <v-app-bar app clipped-left>
                    <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
                    <v-toolbar-title>Keep it simple ~</v-toolbar-title>
                </v-app-bar>

                <v-main>
                    <v-container class="" fluid>
                        <v-row v-for="i in curlist" align="center" justify="center">
                            <v-col class="shrink">
                                <v-icon large>mdi-book</v-icon>
                            </v-col>
                            <v-col justify="center">
                                <v-tooltip right>
                                    <template v-slot:activator="{ on }">
                                        <v-btn :href="i.link" large target="_blank" v-on="on">
                                            <h1>{{i.title}}</h1>
                                        </v-btn>
                                    </template>
                                    <span>{{i.title}}</span>
                                </v-tooltip>
                            </v-col>
                        </v-row>
                    </v-container>
                </v-main>

                <v-footer app>
                    <span align="center" justify="center"> 大道至简 </span>
                </v-footer>
            </v-app>
        </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            props: {
                source: String,
            },

            data: () => ({
                drawer: null,
                list: [],
                curlist: [],
                cato: []
            }),

            created() {
                this.$vuetify.theme.dark = true
                var that = this
                $.ajax({
                    type: "get", //使用get方式
                    url: "list.json", //json文件相对于这个HTML的路径
                    dataType: "json",
                    success: function (ret) {
                        that.list = ret
                        that.curlist = ret.cpp_books
                        that.cato = Object.keys(ret)
                    },
                    error: function () {
                        alert("请求失败");
                    }
                });
            },
            methods: {
                clickNavBar: function (txt) {
                    this.curlist = this.list[txt]
                }
            }
        })

    </script>
</body>

</html>